<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/style/admin.css?t={$Think.config.hello.version}" media="all">
    <title>登录管理系统</title>
    <script>
        top != window && (top.location.href = location.href);
    </script>
    <style type="text/css">
        body, html {font-size: 14px;height: 100%;}
        .layui-layout-body {
            background-image: url(/static/style/imgs/bg-logo.jpg);
            background-color: #f3f3f4;
        }
        #LAY-user-login {
            width: 340px;
        }
        .layadmin-user-login {
            max-width: 400px;
            z-index: 100;
            margin: 0 auto;
            padding-top: 40px;
        }
        .layadmin-user-login-main {
            margin-top: 25vh;
            background-color: #00111C;
            padding: 20px 10px 5px;
            color: #111123;
            opacity: 0.8;
            border-radius: 7px;
            box-shadow: 0 0 10px #3FBEEB;
            border: 1px solid #74B5C9;
        }
        .layadmin-user-login-body .layui-form-item {
            position: relative;
            margin-bottom: 15px;
        }
        .layadmin-user-login-icon {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }
        .layadmin-user-login-body .layui-form-item .layui-input {
            padding-left: 38px;
            height: 38px;
        }
        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
        }
        .layadmin-user-login-codeimg {
            height: 38px;
            width: 100%;
            cursor: pointer;
            box-sizing: border-box;
        }
        .layadmin-user-login-footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            left: 0;
            margin: 0;
            opacity: 0.8;
            background: none repeat scroll 0 0 #fff;
            border-top: 1px solid #e7eaec;
            overflow: hidden;
            padding: 10px 0;
            height: 36px;
            line-height: 36px;
        }

        @media screen and (max-width: 768px){
            .layadmin-user-login {
                padding-top: 0;
            }
            .layadmin-user-login-main {
                margin-top: 15vh;
            }
        }
    </style>
</head>
<body class="layui-layout-body">
    <canvas id="canvas" width="900" height="300" style="position: fixed;top: -50px;width: 60%;left: 20%"></canvas>
    <div class="layadmin-user-login" id="LAY-user-login">
        <div class="layadmin-user-login-main">
            <form method="post" class="layui-form layui-form-pane">
                <div class="layadmin-user-login-body">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                        <input type="text" name="account" id="LAY-user-login-username" lay-verify="required" placeholder="登陆账户" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                        <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                                <input type="text" name="verify" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5">
                                <div class="captcha-touch">
                                    <img src="{:url('/login/captcha')}" class="layadmin-user-login-codeimg captcha">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="formSubmitLogin">登 入</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-trans layadmin-user-login-footer">
            <div style="text-align: right;padding-right: 20px;">© 2019 <a href="javascript:;" target="_blank">{$Think.config.hello.title}</a> All Rights Reserved. <a href=http://beian.miit.gov.cn/ target=_blank>冀ICP备17034267号-1</a></div>
        </div>
    </div>
    <script src="/static/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/static/',
            version: '{$Think.config.hello.version}'
        }).use(['form'], function() {
            var $ = layui.$
                ,form = layui.form;
            $('.layui-layout-body').iosParallax({
                movementFactor: 50
            });
            // 刷新验证码
            var refresh = function(){
                var src = $('.captcha').attr('src');
                var _src = src.indexOf('?') == -1 ? src : src.substr(0, src.indexOf('?'));
                $('.captcha').attr('src', _src + '?' + ~(new Date));
            }
            $('.captcha-touch').on('click', function(){
                if (!$('input[name=verify]').prop('readonly')){
                    refresh();
                }
            });
            form.on('submit(formSubmitLogin)', function(data) {
                var _form = '',
                    that = $(this),
                    text = that.text();
                if ($(this).attr('data-form')) {
                    _form = $(that.attr('data-form'));
                } else {
                    _form = that.parents('form');
                }

                that.prop('disabled', true).text('提交中...');
                $.ajax({
                    type: "POST",
                    url: _form.attr('action'),
                    data: _form.serialize(),
                    success: function(res) {
                        that.text(res.msg);
                        if (res.code == 1) {
                            window.sessionStorage.setItem("lockscreen", false);
                            setTimeout(function(){
                                window.location.href = res.url || '/index/index.html';
                            }, 3000);
                        } else {
                            that.prop('disabled', false).removeClass('layui-btn-normal').addClass('layui-btn-danger');
                            refresh();
                            $('#LAY-user-login-vercode').val('');
                            setTimeout(function(){
                                that.removeClass('layui-btn-danger').addClass('layui-btn-normal').text(text);
                            }, 2000);
                        }
                    }
                });
                return false;
            });
        });
    </script>
    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <script src="/static/js/flaotfont.js?v={$Think.config.hello.version}"></script>
    <script src="/static/js/ios-parallax.js?v={$Think.config.hello.version}"></script>
</body>
</html>